﻿@{
    ViewBag.Title = "Area";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    
    .ui-pg-input {
        width: 50px;
        text-align: right;
    }
    
</style>

<h2>บันทึกพื้นที่โครงการ</h2> 
<form class="form-horizontal" action="" method="">
<fieldset>
    <legend style="text-align:right">รหัสโครงการ 
            <input type="text" value="PR00001" class="input-xlarge" id="projectid" disabled="disabled">
    </legend>

    <div class="control-group">
        <label class="control-label" for="input01">
            ชื่อพื้นที่</label>
        <div class="controls">
            <input type="text" class="input-xlarge" id="input_areaid">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="select01">
            ประเภทพื้นที่</label>
        <div class="controls">
            <select id="areatype">
                <option>บริเวณบ้าน (Patio)</option>
                <option>ทางเดินสวน (Garden path)</option>
                <option>ทางเท้า (Footpath)</option>
                <option>ทางเดินรถ (Driveways)</option>
                <option>งานเสริมเหล็ก (Heavy uses)</option>
                <option>ถนนทางหลวง (Highways)</option>
            </select>
            <button type="button" class="ui-pg-input" style="width:auto">
            แก้ไขขั้นตอน</button>
        </div>
    </div>
   <div class="control-group">
        <label class="control-label" for="lbl_areasize">
            ขนาดพื้นที่</label>
        <div class="controls">
            <input type="text" class="input-xlarge" id="input_size"> ตรม.
        </div>
        
    </div>
    <div class="control-group">
        <label class="control-label" for="input01">
            พื้นที่ Outline</label>
            <div class="controls">
            <button type="button" class="ui-pg-input" style="width:auto">
            สร้าง</button>
             </div>
    </div>
     <div class="control-group">
        <label class="control-label" for="select01">
            ประเภทการปูบล็อค</label>
        <div class="controls">
            <select id="areatype">
                <option>แบบแพทเทิน (Pattern)</option>
                <option>แบบรูปอิสระ (FreeForm)</option>
            </select>
        </div>
    </div>

     <div class="control-group">
        <label class="control-label" for="lbl_areasize">
            ภาพถ่ายพื้นที่โครงการ</label>
        <div id="myCarousel" class="carousel slide" style="display:block;width:500px;margin-left:180px;background-color:Black;text-align:center">
          <!-- Carousel items -->
          <div class="carousel-inner">
            <div class="item active"><img style="margin:auto" src="../../Content/images/block_2.jpg"/></div>
            <div class="item"><img style="margin:auto" src="../../Content/images/block_3.jpg"/></div>
            <div class="item"><img style="margin:auto" src="../../Content/images/block_4.jpg"/></div>
          </div>
          <!-- Carousel nav -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
        <br />
        <div class="controls">
              <input type="file" name="uploadField" />
        </div>
    </div>
    <div class="control-group">
            <label class="control-label" for="input01">
                ชื่อประเภทพื้นที่การใช้งาน :</label>
            <div class="controls">
                <input type="text" class="input-xlarge" id="input01" />
                <p class="help-block">
                    กรอกส่วนใดส่วนหนึ่งของชื่อประเภทพื้นที่เพื่อใช้ค้นหา</p>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
            </label>
            <div class="controls">
                <input type="button" class="btn btn-primary" id="btnSubmit" value="ค้นหา" />
                <input type="button" class="btn" id="btnClear" value="ล้างข้อมูล" />
            </div>
        </div>
        <div class="control-group">
            <table id="list">
            </table>
            <div id="pager">
            </div>
        </div>
</fieldset>
</form>

<script type="text/javascript">

    $(document).ready(function () {

        initialGrid();

        $("#btnSubmit").click(function () {
            doSearch();
        });

        $("#btnClear").click(function () {
            //window.location="/Project/CreateProject";
            doClear();
        });

        $("#btnSave").click(function () {
            window.location="/Project/CreateProject";
            //doClear();
        });

        $("#btnCancel").click(function () {
            window.location="/Project/CreateProject";
            //doClear();
        });

    });

    function doSearch() {

        var keyword = $("#input01").val();

        var params = {
            keyword: keyword
        };

        $('#list').jqGrid('clearGridData');
        $('#list').setGridParam({ url: '/AreaType/List', postData: params }).trigger('reloadGrid');
    }

    function doClear() {
        $("#input01").val("");
        $('#list').jqGrid('clearGridData');
    }

    function initialGrid() {

        var updateDialog = {
            url: '/AreaType/Update'
                , closeAfterAdd: true
                , closeAfterEdit: true
                , recreateForm: true
                , beforeShowForm: function (form) {
                    // "editmodlist"
                    var grid = $('#list');
                    var dlgDiv = $("#editmod" + grid[0].id);
                    var dlgWidth = dlgDiv.width();
                    var dlgHeight = dlgDiv.height();

                    if (dlgDiv[0] == undefined) {
                        dlgDiv = $("#delmod" + grid[0].id);
                        dlgDiv[0].style.width = "350px";
                        dlgWidth = dlgDiv.width();
                    }

                    dlgDiv[0].style.left = Math.round(($(window).width() - dlgWidth) / 2) + "px";
                }
                , afterShowForm: function (formId) {

                }
                , afterclickPgButtons: function (whichbutton, formid, rowid) {

                }
                , modal: true

                , onclickSubmit: function (params) {
                    var ajaxData = {};

                    var list = $("#list");
                    var selectedRow = list.getGridParam("selrow");
                    var rowData = list.getRowData(selectedRow);
                    ajaxData = { supplier_id: rowData.supplier_id };

                    return ajaxData;
                }
                , width: "550"
        };

            var delDialog = {
                url: '/AreaType/Delete'
                , closeAfterAdd: true
                , closeAfterEdit: true
                , recreateForm: true
                , beforeShowForm: function (form) {
                    // "editmodlist"
                    var grid = $('#list');
                    var dlgDiv = $("#delmod" + grid[0].id);
                    var dlgWidth = dlgDiv.width();

                    dlgDiv[0].style.left = Math.round(($(window).width() - dlgWidth) / 2) + "px";
                }
                , modal: true
                , onclickSubmit: function (params) {
                    var ajaxData = {};

                    var list = $("#list");
                    var selectedRow = list.getGridParam("selarrrow");
                    ajaxData = { ids: selectedRow };

                    return ajaxData;
                }
                , ajaxDelOptions: { traditional: true }
                , width: "350"
            };

        $.jgrid.nav.addtext = "";
        $.jgrid.nav.edittext = "";
        $.jgrid.nav.deltext = "";
        $.jgrid.edit.addCaption = "เพิ่มรายการประเภทพื้้นที่การใช้งาน";
        $.jgrid.edit.editCaption = "แก้ไขรายการประเภทพื้้นที่การใช้งาน";
        $.jgrid.del.caption = "ลบรายการ";
        $.jgrid.del.msg = "ต้องการลบรายการนี้หรือไม่?";

        $("#list").jqGrid({
            datatype: 'json',
            mtype: 'POST',
            colNames: ['id', 'ชื่อประเภทพื้้นที่การใช้งาน', 'วันที่สร้างรายการ'],
            colModel: [
                    { name: 'area_type_id', index: 'area_type_id', width: 40, align: 'left', key: true, editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
                    { name: 'area_type_name', index: 'area_type_name', width: 690, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true }, editoptions: { dataInit: function (elem) { $(elem).width(350); } }, formoptions: { elmsuffix: ' *'} },
                    { name: 'area_type_create_date', index: 'area_type_create_date', width: 140, align: 'left', key: false}],
            pager: $('#pager'),
            rowNum: 10,
            width: 850,
            height: 350,
            rownumbers: true,
            multiselect: true,
            sortname: 'area_type_create_date',
            sortorder: "desc",
            viewrecords: true,
            shrinkToFit: false,
            caption: 'รายการประเภทพื้้นที่การใช้งาน',
            autowidth: true,
            ondblClickRow: function (rowid, iRow, iCol, e) {
                alert(rowid);
            },
            subGrid: true,
            subGridRowExpanded: function(subgridId, mainRowId) { // mainRowId คือ ID ของ AreaType
                
                var subgridTableId; // id ของ Grid ที่แสดงรายการขั้นตอนการดำเนินงาน
                var subgridPagerId; // id ของ Pager ของ Grid ที่แสดงขั้นตอนการดำเนินงาน
                subgridTableId = subgridId+"_t";
                subgridPagerId = "p_" + subgridTableId;
                jQuery("#"+subgridId).html("<table id='"+subgridTableId+"' class='scroll'></table><div id='" + subgridPagerId + "' class='scroll'></div>");
                
                //Dialog สำหรับ CRUD ของ ขั้นตอน

                var subUpdateDialog = {
                        url: '/AreaType/SubUpdate'
                            , closeAfterAdd: true
                            , closeAfterEdit: true
                            , recreateForm: true
                            , beforeShowForm: function (form) {
                                // "editmodlist"
                                var grid = $('#' + subgridTableId);
                                var dlgDiv = $("#editmod" + grid[0].id);
                                var dlgWidth = dlgDiv.width();

                                if (dlgDiv[0] == undefined) {
                                    dlgDiv = $("#delmod" + grid[0].id);
                                    dlgDiv[0].style.width = "350px";
                                    dlgWidth = dlgDiv.width();
                                }

                                dlgDiv[0].style.left = Math.round(($(window).width() - dlgWidth) / 2) + "px";
                            }
                            , afterShowForm: function (formId) {

                            }
                            , afterclickPgButtons: function (whichbutton, formid, rowid) {

                            }
                            , modal: true

                            , onclickSubmit: function (params) {
                                var ajaxData = {};

                                var list = $("#" + subgridTableId);
                                var selectedRow = list.getGridParam("selrow");
                                var rowData = list.getRowData(selectedRow);
                                ajaxData = { typeId: mainRowId, order: $("#order_no").val() };

                                return ajaxData;
                            }
                            , width: "550"
                    };

                    var subDelDialog = {
                        url: '/AreaType/SubDelete'
                        , closeAfterAdd: true
                        , closeAfterEdit: true
                        , recreateForm: true
                        , beforeShowForm: function (form) {
                            // "editmodlist"
                            var grid = $('#' + subgridTableId);
                            var dlgDiv = $("#delmod" + grid[0].id);
                            var dlgWidth = dlgDiv.width();

                            dlgDiv[0].style.left = Math.round(($(window).width() - dlgWidth) / 2) + "px";
                        }
                        , modal: true
                        , onclickSubmit: function (params) {
                            var ajaxData = {};

                            var list = $("#" + subgridTableId);
                            var selectedRow = list.getGridParam("selarrrow");
                            ajaxData = { ids: selectedRow, typeId: mainRowId };

                            return ajaxData;
                        }
                        , ajaxDelOptions: { traditional: true }
                        , width: "350"
                    };

                jQuery("#"+subgridTableId).jqGrid({
                    url:'/AreaType/SubList',
                    postData: {typeId: mainRowId},
                    datatype: "json",
                    mtype: 'POST',
                    colNames: ['id', 'ขั้นตอน','ขั้นตอน', 'ลำดับ'],
                    colModel: [
                                { name: 'area_type_step_id', index: 'area_type_step_id', width: 40, align: 'left', key: true, editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
                                { name:"step_id", index:"step_id", width:50, key: false, editable: true, edittype: 'select', editoptions: { dataUrl: "/AreaType/GetStep", dataInit: function (elem) { $(elem).width(250); }}, hidden: true, editrules: { required: false, edithidden: true } },
                                { name: "step_name", index: "step_name", width: 530, key: false, editable: false, editrules: { edithidden: false } },
                                { name: "order_no", index: "order_no", width: 50, key: false, align: 'right', editable: true, edittype: 'text', formatter:'integer',  editoptions: { dataInit: function (elem) { $(elem).width(50); }} }
                    ],
                    height: '100%',
                    rowNum:20,
                    width: 835,
                    viewrecords: true,
                    rownumbers: true,
                    sortname: 'order_no',
                    sortorder: "asc",
                    caption: 'รายการขั้นตอนการดำเนินงาน',
                    pager: subgridPagerId,
                    subGrid: true,
                    subGridRowExpanded: function(innberSubGridId, subRowId) { // subRowId คือ Id ของ AreaTypeStep
                        
                        var innerSubgridTableId; // id ของ Grid ที่แสดงรายการ Material
                        var innerSubgridPagerId; // id ของ Pager ของ Grid ที่แสดงรายการ Material
                        innerSubgridTableId = innberSubGridId+"_t";
                        innerSubgridPagerId = "p_" + innerSubgridTableId;
                        jQuery("#"+innberSubGridId).html("<table id='"+innerSubgridTableId+"' class='scroll'></table><div id='" + innerSubgridPagerId + "' class='scroll'></div>");

                        //Dialog สำหรับ CRUD ของ วัสดุ

                        var matUpdateDialog = {
                                url: '/AreaType/InnerSubUpdate'
                                    , closeAfterAdd: true
                                    , closeAfterEdit: true
                                    , recreateForm: true
                                    , beforeShowForm: function (form) {
                                        // "editmodlist"
                                        var grid = $('#' + innerSubgridTableId);
                                        var dlgDiv = $("#editmod" + grid[0].id);
                                        var dlgWidth = dlgDiv.width();

                                        if (dlgDiv[0] == undefined) {
                                            dlgDiv = $("#delmod" + grid[0].id);
                                            dlgDiv[0].style.width = "350px";
                                            dlgWidth = dlgDiv.width();
                                        }

                                        dlgDiv[0].style.left = Math.round(($(window).width() - dlgWidth) / 2) + "px";
                                    }
                                    , afterShowForm: function (formId) {

                                    }
                                    , afterclickPgButtons: function (whichbutton, formid, rowid) {

                                    }
                                    , modal: true

                                    , onclickSubmit: function (params) {
                                        var ajaxData = {};

                                        var list = $("#" + innerSubgridTableId);
                                        var selectedRow = list.getGridParam("selrow");
                                        var rowData = list.getRowData(selectedRow);
                                        ajaxData = { typeStepId: subRowId, qty: $("#used_material_quatity").val() };

                                        return ajaxData;
                                    }
                                    , width: "550"
                            };

                            var matDelDialog = {
                                url: '/AreaType/InnerSubDelete'
                                , closeAfterAdd: true
                                , closeAfterEdit: true
                                , recreateForm: true
                                , beforeShowForm: function (form) {
                                    // "editmodlist"
                                    var grid = $('#' + subgridTableId);
                                    var dlgDiv = $("#delmod" + grid[0].id);
                                    var dlgWidth = dlgDiv.width();

                                    dlgDiv[0].style.left = Math.round(($(window).width() - dlgWidth) / 2) + "px";
                                }
                                , modal: true
                                , onclickSubmit: function (params) {
                                    var ajaxData = {};

                                    var list = $("#" + subgridTableId);
                                    var selectedRow = list.getGridParam("selarrrow");
                                    ajaxData = { ids: selectedRow, typeId: mainRowId };

                                    return ajaxData;
                                }
                                , ajaxDelOptions: { traditional: true }
                                , width: "350"
                            };

                        jQuery("#"+innerSubgridTableId).jqGrid({
                            url:'/AreaType/InnerSubList',
                            postData: {typeStepId: subRowId},
                            datatype: "json",
                            mtype: 'POST',
                            colNames: ['id', 'material Type','ประเภทวัสดุ', 'จำนวน'],
                            colModel: [
                                        { name: 'area_type_step_material_id', index: 'area_type_step_material_id', width: 40, align: 'left', key: true, editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
                                        { name: "material_type_id", index:"material_type_id", width:50, key: false, editable: true, edittype: 'select', editoptions: { dataUrl: "/AreaType/GetMatType", dataInit: function (elem) { $(elem).width(250); }}, hidden: true, editrules: { required: false, edithidden: true } },
                                        { name: "material_name", index: "material_name", width: 530, key: false, editable: false, editrules: { edithidden: false } },
                                        { name: "used_material_quatity", index: "used_material_quatity", width: 50, key: false, align: 'right', editable: true, edittype: 'text', formatter:'integer',  editoptions: { dataInit: function (elem) { $(elem).width(50); }} }
                            ],
                            height: '100%',
                            rowNum:20,
                            width: 775,
                            viewrecords: true,
                            rownumbers: true,
                            sortname: 'area_type_step_material_id',
                            sortorder: "asc",
                            caption: 'รายการวัสดุ',
                            pager: innerSubgridPagerId
                        }).navGrid('#' + innerSubgridPagerId,
                            {
                                edit: false, add: true, del: true, search: false, refresh: true
                            },
                            matUpdateDialog,
                            matUpdateDialog,
                            matDelDialog
                        );
                    }
                }).navGrid('#' + subgridPagerId,
                                {
                                    edit: false, add: true, del: true, search: false, refresh: true
                                },
                                subUpdateDialog,
                                subUpdateDialog,
                                subDelDialog
                            );
            },
        }).navGrid('#pager',
                {
                    edit: true, add: true, del: true, search: false, refresh: true
                },
                updateDialog,
                updateDialog,
                delDialog
            );

    }

</script>
 <div class="control-group">
            <label class="control-label">
            </label>
            <div class="controls">
                <input type="button" class="btn btn-primary" id="btnSave" value="บันทึก" />
                <input type="button" class="btn" id="btnCancel" value="ยกเลิก" />
            </div>
        </div>